<!-- 群聊 -->
<template>
  <div class="h-full flex flex-col space-y-4">
    <h2>群聊 当前人数（{{ memberCount }}）</h2>
    <!-- 聊天信息 -->
    <div class="h-full">
      <ul
        v-if="list_message.length > 0"
        class="border h-full p-2 space-y-4 w-full"
      >
        <li
          v-for="(item, index) in list_message"
          :key="item.userId + '_' + index"
          :class="[
            'self-start w-full flex items-start',
            item.userId !== props.userId ? 'flex-row-reverse' : '',
          ]"
        >
          <el-tooltip :content="item.userId">
            <div class="w-12 h-12 rounded-full overflow-hidden">
              <!-- 其他人 -->
              <img
                v-if="item.userId !== props.userId"
                src="http://source.unsplash.com/100x100/?woman"
                alt=""
                class="w-full rounded-full"
              />
              <!-- 本人 -->
              <img
                v-else
                src="http://source.unsplash.com/100x100/?man"
                class="w-full rounded-full"
              />
            </div>
          </el-tooltip>
          <div
            class="w-full p-4 mx-2 rounded-t-lg rounded-r-lg bg-neutral-300 shadow text-sm"
          >
            {{ item.content }}
          </div>
        </li>
      </ul>
      <el-empty v-else description="暂无消息" />
    </div>
    <!-- 信息提交 -->
    <div class="h-60 overflow-auto">
      <el-input v-model="message" type="textarea" placeholder="请输入内容" />
      <div class="mt-6 flex justify-center">
        <el-button class="px-10" type="primary" @click="sendMessageFn">
          发送
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import { ChatMessage } from "./liveType";
import AnyRTCLive, { AnyRTCLiveEvents } from "../../anyrtcLive";

interface ChatProps {
  userId: string;
}
const props = defineProps<ChatProps>();

/** 信息发送 */
const message = ref("");
const sendMessageFn = async () => {
  console.log("发送", message.value);
  await AnyRTCLive.sendMessage(
    JSON.stringify({
      type: "text",
      content: message.value,
    })
  );

  list_message.value.push({
    userId: props.userId,
    content: message.value,
    type: "text",
  });
  message.value = "";
};

/** 信息列表 */
const list_message = ref<ChatMessage[]>([]);
// 频道人数
const memberCount = ref(0);
const ChannelMessage: AnyRTCLiveEvents["ChannelMessage"] = (
  message,
  memberId
) => {
  console.log("ChannelMessage", message, memberId);
  const { content, type } = JSON.parse(message.text);
  list_message.value.push({
    userId: memberId,
    content,
    type,
  });
};
const ChannelMemberCountUpdated: AnyRTCLiveEvents["ChannelMemberCountUpdated"] =
  (count) => {
    console.log("ChannelMessage", count);
    memberCount.value = count;
  };
onMounted(() => {
  AnyRTCLive.on("ChannelMessage", ChannelMessage);
  AnyRTCLive.on("ChannelMemberCountUpdated", ChannelMemberCountUpdated);
});
onUnmounted(() => {
  AnyRTCLive.off("ChannelMessage", ChannelMessage);
  AnyRTCLive.off("ChannelMemberCountUpdated", ChannelMemberCountUpdated);
});
</script>
